<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    modelValue: { type: Number, required: true },
  },
});
</script>

<template>
  <view class="comment-score">
    <view class="comment-score-num">
      {{ modelValue }}<text class="comment-score-num2">/分</text>
    </view>
    <image
      class="comment-score-icon"
      v-if="modelValue > 4"
      src="@/package/mall/static/goods-detail-score.png"
    />
    <image
      class="comment-score-icon"
      v-else-if="modelValue > 3"
      src="@/package/mall/static/goods-detail-score2.png"
    />
    <image
      class="comment-score-icon"
      v-else
      src="@/package/mall/static/goods-detail-score3.png"
    />
  </view>
</template>

<style lang="scss">
.comment-score {
  display: flex;
  align-items: center;

  .comment-score-num {
    font-size: 44rpx;
    color: #ff7900;
    line-height: 60rpx;
    font-weight: bold;
  }

  .comment-score-num2 {
    font-size: 26rpx;
    color: #666666;
    line-height: 46rpx;
    font-weight: 400;
  }

  .comment-score-icon {
    width: 52rpx;
    height: 52rpx;
    margin-left: 10rpx;
  }
}
</style>